import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {
    Form,
    Input,
    InputNumber,
    Button,
    Card,
    Select,
    Radio,
    Icon,
    Table,
} from 'antd';
import {message} from "antd/lib/index";
import styles from './index.less';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
@connect(state => ({
    submitting: state.adConfigruationEditAndAdd.loading,
}))
@Form.create()
export default class AdConfigruationAdd extends PureComponent{
    handleParentModalVisible = (e) => {
        this.props.handleModalVisible();
    };

    /**
     * 提交
     */
    handleSubmit = (editType, seat_id, e) =>{
        this.props.form.validateFieldsAndScroll((err, values) =>{
            if (!err){
                this.props.dispatch({
                    type: `adConfigruationEditAndAdd/${editType}`,
                    payload: {...values, seat_id: seat_id},
                    callback: (response) => {
                        if (response.result === 0){
                            message.success('提交成功');
                            this.props.handleModalVisible();
                            this.props.handleModalSuccess(this.props.pagination);
                        }else {
                            message.success('提交失败');
                        }
                    }
                })
            }
        })
    };
    render(){
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10}
            }

        };
        const submitFormLayout ={
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7}
            },
        };
        const {getFieldDecorator} = this.props.form;
        const {submitting, record, editType} = this.props;
        const formInitValue = editType === 'add' ? '' : record;
        const seat_id = editType === 'add' ? '' : record.seat_id;
        return(
            <Card bordered={false}>
                <Form hideRequiredMark onSubmit={this.handleSubmit}>
                    <FormItem {...formItemLayout} label='位置编码'>
                        {getFieldDecorator('seat_code', {
                            initialValue: formInitValue.seat_code || '',
                            rules: [{
                                required: true, message: '请输入位置编码',
                            },{
                                max: 32, message: '编码长度最多为32位'
                            }]
                        })(
                           <Input placeholder = "请输入"/>
                        )}
                    </FormItem>
                    <FormItem {...formItemLayout} label='位置名称'>
                        {getFieldDecorator('seat_name', {
                            initialValue: formInitValue.seat_name || '',
                            rules: [{
                                required: true, message: '请输入位置名称',
                            }, {
                                max: 32, message: '位置名称最长为255位',
                            }]
                        })(
                            <Input placeholder = "请输入"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="位置类型"
                    >
                        {getFieldDecorator('seat_type', {
                            initialValue: formInitValue.seat_type || '',
                            rules: [{
                                required: true, message: '请选择位置类型',
                            }],
                        })(
                            <Select placeholder="请选择" style={{width: '100%'}}>
                                <Option value="">请选择</Option>
                                <Option value={1}>图片轮播</Option>
                                <Option value={2}>图片静态广告</Option>
                                <Option value={3}>列表</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                        <Button
                            type="primary"
                            loading={submitting}
                            onClick={this.handleSubmit.bind(this, editType, seat_id)}>
                            提交
                        </Button>
                        <Button
                            style={{marginLeft: 8}}
                            onClick={this.handleParentModalVisible}>
                            取消
                        </Button>
                    </FormItem>
                </Form>
            </Card>

        );
    }
}
